<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>信息推送-资产处置</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app" class="page-container" v-cloak>
      <div class="page-content">
        <el-row :gutter="10">
          <!-- 页面标题 -->
          <el-col :span="24">
            <div class="panel-title">信息推送-资产处置</div>
          </el-col>
        </el-row>
        <div class="panel-container">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form
                :model="filterForm"
                size="mini"
                :inline="true"
                ref="filterFormRef"
                class="form-filter"
              >
                <el-form-item label="锁定状态:" prop="is_lock">
                  <el-radio-group
                    v-model="filterForm.is_lock"
                    @change="getInfoList"
                  >
                    <el-radio :label="0">全部</el-radio>
                    <el-radio :label="1">未锁定</el-radio>
                    <el-radio :label="2">已锁定</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="推荐属性:" prop="recommend">
                  <el-checkbox-group
                    v-model="filterForm.recommend"
                    @change="getInfoList"
                  >
                    <el-checkbox label="is_gt">个体</el-checkbox>
                    <el-checkbox label="is_dj">独家</el-checkbox>
                    <el-checkbox label="is_tj">推荐</el-checkbox>
                    <el-checkbox label="is_img">图片</el-checkbox>
                    <el-checkbox label="is_video">视频</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="价值等级:" prop="value">
                  <el-radio-group
                    v-model="filterForm.value"
                    @change="getInfoList"
                  >
                    <el-radio :label="0">全部</el-radio>
                    <el-radio :label="1">低</el-radio>
                    <el-radio :label="2">中</el-radio>
                    <el-radio :label="3">高</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="分类:" prop="cate">
                  <el-cascader
                    v-model="filterForm.cate"
                    clearable
                    :options="cateOption"
                    collapse-tags
                    :props="cateProps"
                    @change="getInfoList"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="地区:" prop="zone">
                  <el-cascader
                    v-model="filterForm.zone"
                    clearable
                    :options="zoneOption"
                    collapse-tags
                    :props="zoneProps"
                    @change="getInfoList"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="内容检索:" prop="search">
                  <el-input
                    v-model="filterForm.search"
                    placeholder="请输入检索内容"
                    @change="getInfoList"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="search_type">
                  <el-select
                    v-model="filterForm.search_type"
                    @change="getInfoList"
                  >
                    <el-option label="按标题" value="title"></el-option>
                    <el-option label="按内容" value="desc"></el-option>
                    <el-option label="按联系人" value="user_name"></el-option>
                    <el-option
                      label="按联系电话"
                      value="user_phone"
                    ></el-option>
                    <el-option label="按id" value="number_id"></el-option>
                    <el-option
                      label="按公司名称"
                      value="company_name"
                    ></el-option>
                    <el-option
                      label="按采集来源"
                      value="spider_source"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间:" prop="time">
                  <el-date-picker
                    v-model="filterForm.time"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="getInfoList"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="是否审核:" prop="power_method">
                  <el-select
                    v-model="filterForm.power_method"
                    @change="getInfoList"
                    clearable
                  >
                    <el-option label="未审核" :value="0"></el-option>
                    <el-option label="人工审核" :value="1"></el-option>
                    <el-option label="机器审核" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否推送:" prop="is_push">
                  <el-checkbox-group
                    v-model="filterForm.is_push"
                    @change="getInfoList"
                  >
                    <el-checkbox :label="1">已推送</el-checkbox>
                    <el-checkbox :label="0">未推送</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="推送人:" prop="crm_push_mans">
                  <el-input
                    v-model="filterForm.crm_push_mans"
                    placeholder="请输入推送人"
                    @change="getInfoList"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <div class="panel-line flex-end">
                    <el-button type="primary" @click="getInfoList"
                      >查询</el-button
                    >
                    <el-button @click="resetfilterForm">重置</el-button>
                  </div>
                </el-form-item>
              </el-form>
              <el-table
                stripe
                :data="infoTable.list"
                size="mini"
                :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
                ref="infoTable"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="infoTable.loading"
              >
                <el-table-column
                  type="selection"
                  align="center"
                  fixed="left"
                  width="55"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="标题"
                  prop="title"
                  width="200"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="省份"
                  prop="sheng_name"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="城市"
                  prop="shi_name"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="审核人"
                  prop="power_man_name"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="审核结果"
                  prop="power_result"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="推送状态"
                  prop="is_push"
                >
                  <template slot-scope="scope">
                    {{ scope.row.is_push === 0 ? '未推送' : '已推送' }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="创建时间"
                  prop="created_time"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="推送时间"
                  prop="crm_push_time"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="推送人"
                  prop="push_names"
                ></el-table-column>
                <el-table-column
                  align="center"
                  fixed="right"
                  header-align="center"
                  label="操作"
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleDetail(scope)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                small
                background
                :current-page="infoTable.pageNumber"
                :page-size="infoTable.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="infoTable.total"
                @current-change="currentChangeHandle('infoTable', $event)"
                @size-change="sizeChangeHandle('infoTable', $event)"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px; text-align: right"
              ></el-pagination>
              <div class="panel-line" style="margin-top: 20px">
                <el-button
                  type="primary"
                  :disabled="multipleSelection.length === 0"
                  @click="handlePush('table')"
                  size="mini"
                  >推送用户</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!--  查看详情 -->
      <el-dialog title="查看详情" :visible.sync="showDialogDetail" width="80%">
        <div class="dialog-content" v-if="showDialogDetail">
          <el-row :gutter="10">
            <!-- 文字信息 -->
            <el-col :span="18">
              <div class="info-panel">
                <el-row :gutter="10">
                  <el-col :span="24">
                    <p class="info-item">
                      <strong>标题:</strong> {{ infoDetail.title }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p class="info-item">
                      <strong>发布时间:</strong> {{ infoDetail.feijiu_pub_time
                      }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p class="info-item">
                      <strong>处置单位:</strong> {{ infoDetail.company_name }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p class="info-item">
                      <strong>联系人:</strong> {{ infoDetail.user_name }}
                    </p>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <p class="info-item">
                      <strong>所属分类:</strong> {{ infoDetail.cate_name }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p class="info-item">
                      <strong>所属地区:</strong> {{ infoDetail.city_names }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p class="info-item">
                      <strong>联系电话:</strong> {{ infoDetail.showPhone }}
                    </p>
                  </el-col>
                  <el-col :span="24">
                    <div class="info-item">
                      <strong>信息介绍:</strong>
                      <div class="desc-box" v-html="infoDetail.desc"></div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <p class="info-item">
                      <strong>审核人员:</strong> {{ infoDetail.power_man_name }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p class="info-item">
                      <strong>审核结果:</strong>
                      <el-select
                        v-model="infoDetail.power_result"
                        placeholder="请选择"
                        size="mini"
                        @change="handleDealStatusChange"
                      >
                        <el-option label="已成交" value="已成交"> </el-option>
                        <el-option label="处置中" value="处置中"> </el-option>
                        <el-option label="已失效" value="已失效"> </el-option>
                        <el-option label="同行数据" value="同行数据">
                        </el-option>
                      </el-select>
                    </p>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <p class="info-item">
                      <strong>推送状态:</strong> {{ infoDetail.is_push === 1 ?
                      '已推送' : '未推送' }}
                    </p>
                    <p class="info-item">
                      <strong>推送人:</strong> {{ infoDetail.push_names }}
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <div class="info-item">
                      <strong>核实说明:</strong>
                      <el-input
                        v-model="infoDetail.crm_mark_result"
                        size="mini"
                        placeholder="请输入核实说明"
                        type="textarea"
                        :rows="4"
                      ></el-input>
                      <div style="margin-top: 4px; text-align: right">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="handleDealStatusChange"
                          >保存</el-button
                        >
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <!-- 图片轮播 -->
            <el-col :span="6">
              <el-carousel
                :interval="4000"
                arrow="never"
                indicator-position="outside"
              >
                <el-carousel-item
                  v-for="(image, index) in infoDetail.images"
                  :key="index"
                >
                  <div class="img-box">
                    <img :src="image" style="width: 100%" />
                  </div>
                </el-carousel-item>
                <el-carousel-item v-if="infoDetail.video_url">
                  <video width="100%" height="100%" id="Video" controls>
                    <source :src="infoDetail.video_url" />
                  </video>
                </el-carousel-item>
                <el-carousel-item
                  v-if=" (!infoDetail.images || infoDetail.images.length === 0) && (!infoDetail.video_url || infoDetail.video_url.length === 0)"
                >
                  <el-empty description="暂无图片"></el-empty>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
          <div class="copy-button-container">
            <el-button
              type="primary"
              size="mini"
              @click="handleCopyInfo"
              :loading="loadingCopy"
            >
              一键复制
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="handlePush('detail')"
              :loading="loadingCopy"
            >
              推送用户
            </el-button>
          </div>
        </div>
      </el-dialog>

      <!--  推送用户 -->
      <el-dialog
        title="推送用户"
        :visible.sync="showDialogPush"
        width="80%"
        top="5%"
      >
        <div class="dialog-content dialog-push" v-if="showDialogPush">
          <div class="scrollable-panel">
            <div class="section user-group-section">
              <h3>用户组</h3>
              <div class="group-list" :gutter="10">
                <div
                  class="group-item"
                  v-for="(group, index) in userGroups"
                  :key="group.id"
                  :label="group.id"
                >
                  <el-checkbox
                    :indeterminate="group.isIndeterminate"
                    v-model="group.isChecked"
                    @change="handleCheckGroup(group, $event)"
                  >
                    <div class="group-name-box">
                      <div class="group-name" :title="group.name">
                        {{group.name}}
                      </div>
                      <el-button type="text" @click="toggleGroupUsers(group)">
                        <i v-if="group.expanded " class="el-icon-arrow-up"></i>
                        <i v-else class="el-icon-arrow-down"></i>
                      </el-button>
                    </div>
                  </el-checkbox>
                  <div class="group-user-list" v-show="group.expanded">
                    <el-checkbox
                      v-for="(user, userIndex) in group.users"
                      :key="user.id"
                      :label="user.id"
                      v-model="user.isChecked"
                      @change="handleCheckUser(group, user)"
                    >
                      <span :title="user.name"> {{ user.name }} </span>
                    </el-checkbox>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="section ungrouped-users-section"
              v-if="ungroupedUsers.length > 0"
            >
              <h3>未分组用户</h3>
              <el-checkbox-group v-model="formPush.users">
                <el-checkbox
                  v-for="(user, index) in ungroupedUsers"
                  :key="index"
                  :label="user.id"
                >
                  <span :title="user.name"> {{ user.name }} </span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="section push-channel-section">
            <h3>推送途径</h3>
            <el-checkbox-group v-model="formPush.channels">
              <el-checkbox label="wechat">微信服务号</el-checkbox>
              <el-checkbox label="app">APP消息</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 底部操作按钮 -->
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="showDialogPush = false"
            >关闭</el-button
          >
          <el-button size="mini" type="primary" @click="handleConfirmPush"
            >确认推送</el-button
          >
        </div>
      </el-dialog>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
